<template>
    <div class="box">
        <div class="header">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>场馆维护</el-breadcrumb-item>
                <el-breadcrumb-item><a href="#">场地预定</a></el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="select">
            <div class="select_left">
                <div class="select_left_info">
                    <el-form-item label="场馆">
                        <el-select v-model="select.name" placeholder="请选择场馆">
                            <el-option :label="item.name" :value="item.name" v-for="item in cglist" :key="item.id"
                                @click="getSport(item)" />
                        </el-select>
                    </el-form-item>
                </div>
                <div class="block">
                    <span class="demonstration">开始时间</span>
                    <el-date-picker v-model="select.time" type="date" placeholder="请选择时间" />
                </div>

            </div>
            <div class="select_right">
                <button>批量挂起</button>
            </div>
        </div>
        <div class="content">
            <div class="top">
                <div class="top_left">
                    <div class="tag">场馆</div>
                    <span>{{ select.name }}</span>
                </div>
                <div class="top_right">
                    <!-- <button @click="splitTime = 15">间隔15分钟</button>
                    <button @click="splitTime = 60">间隔一小时</button> -->
                    <button>场次</button>
                </div>
            </div>
            <div class="content_title">
                <div class="title_left" v-for="(item) in sport" :key="item.id">
                    <span v-for="(i, index) in item.sports" :key="i.id" @click="getSission(i.id, index)"
                        :class="activeNum == index ? 'active' : ''">
                        {{ i.sport_type_codeName }}
                    </span>
                </div>
                <div class="title_right">
                    <div class="title_right_kuang">
                        <div class='kuang'></div>
                        <span>可预定</span>
                    </div>
                    <div class="title_right_kuang">
                        <div class='kuang'>✔</div>
                        <span>已选定</span>
                    </div>
                    <div class="title_right_kuang">
                        <div class='kuang'></div>
                        <span>已预定</span>
                    </div>
                    <div class="title_right_kuang">
                        <div class='kuang'></div>
                        <span>长订</span>
                    </div>
                    <div class="title_right_kuang">
                        <div class='kuang'></div>
                        <span>挂起</span>
                    </div>
                </div>
            </div>
            <div class="content_table">
                <div class="content_table_info">
                    <div class="resource-titles">
                        <div class="resource-titles_x">
                            <div class="resource-titles_info">
                                <div class="resource-title_pk">场地/时间</div>
                                <div class="resource-items_pk">
                                    <span class="resource-time" v-for="item in sessions1" :key="item">{{ item.ends }}</span>
                                    <span class="resource-time" v-for="items in sessions2" :key="items">{{
                                        items.starts }}</span>
                                    <span class="resource-time">21:00</span>
                                </div>
                            </div>
                            <div class="resource-title_box">
                                <div>
                                    <div class="resource-title" v-for="item in session" :key="item.id">{{ item.name }}</div>
                                </div>
                                <div>
                                    <div class="resource-items" v-for="(i, j) in session.length" :key="i">
                                        <span class="resource-item"
                                            v-for="(item, k) in (sessions1.length + sessions2.length) + 2" :key="item">
                                            <div :class="GuaList.some(item => item.j == j && item.k == k) ? 'active' : 'item-state'"
                                                @click="Gua({ j, k })">✔</div>
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="guaQi">
            <div class="guaQi_title">
                <el-icon>
                    <Tickets class="svg" />
                </el-icon>
                <span>{{ select.name }}</span>
            </div>
            <div class="guaQi_content">
                <div class="guaQi_list_left">
                    <el-radio-group v-model="radio">
                        <el-radio :label="1">会员</el-radio>
                        <el-radio :label="2">非会员</el-radio>
                    </el-radio-group>

                    <el-form-item>
                        <span>白金会员</span>
                        <el-select v-model="vip" placeholder="">
                            <el-option label="白金会员" value="白金会员" />
                            <el-option label="普通会员" value="普通会员" />
                        </el-select>
                        <div class="phone">
                            <span>手机号</span>
                            <input type="text">
                        </div>
                        <div class="phone">
                            <span>备注</span>
                            <input type="text">
                        </div>
                    </el-form-item>
                </div>
                <div class="guaQi_list_right">
                    <p>预定场次</p>
                    <div class="guaQi_list_right_info">
                        <div class="yuding" v-for="item in wantGua" :key="item">
                            <span>{{ item.startTime }}-{{ item.endTime }}</span>
                            <span>{{ item.fildName }}</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script setup>
// 处理时间
import dayjs from 'dayjs';
import { ref } from 'vue'
import { Getcg, Getcg1, Getsession } from '@/api/Myapi.js'
//下拉菜单
const select = ref({
    name: '西可体育丨黄兴公园西可野战',
    time: '2023-06-07'
})
const cglist = ref([])
const sport = ref([])
//点击切换
const activeNum = ref(0)
//挂起时间
const session = ref([])
//开放时间
const Sport = ref([])
const openTime = ref([])
const day = ref(0)
// 分割时间
const splitTime = ref(60);
//时间 分段
const sessions1 = ref([]);
const sessions2 = ref([]);
//选择是否为会员
const radio = ref(1)
//白金会员
const vip = ref({})
//支付方式
// const pay =ref()
//预定
const wantGua = ref([])
//已挂起打对钩
const GuaList = ref([])
const Gua = (obj) => {
    let a = GuaList.value.some(item => item.j == obj.j && item.k == obj.k);
    setTimeout(() => {
        if (a) {
            let index = GuaList.value.findIndex(item => item.j == obj.j && item.k == obj.k);
            GuaList.value.splice(index, 1);
        } else {
            GuaList.value.push(obj);
        }
    }, 50)
    const objs = {
            'date': select.value.time,
            'startTime':sessions1.value[obj.k].starts,
            'endTime': sessions1.value[obj.k].ends,
            'fildName': session.value[obj.j].name
        }
        if (GuaList.value.some(item => item.j == obj.j && item.k == obj.k)) {
            let index = wantGua.value.indexOf(objs);
            wantGua.value.splice(index, 1);
        } else {
            wantGua.value.push(objs)
        }
}
//获取运动类型
const getSport = (item) => {
    Getcg1({ id: item.id }).then(res => {
        if (res.data.code == 0) {
            sport.value = res.data.data
        }
    })
}
//获取场馆
const getStadium = () => {
    Getcg({ order: "asc" }).then(res => {
        if (res.data.code == 0) {
            cglist.value = res.data.data
            Sport.value = res.data.data[0].sports[0];
            getSport({ id: res.data.data[3].sports[0].id })
            getSission(res.data.data[3].sports[0].id, 0) //快 
            console.log(cglist.value);
        }
    })
}
getStadium()
//获取场地时间
const getSission = (id, index) => {
    activeNum.value = index
    day.value = index + 1
    openTime.value = Sport.value['day' + (day.value)].split(",");
    // openTime.value = sport.value[0].sports
    console.log(openTime.value);
    var arr = genTimeSession(openTime.value[0].split("-")[0], openTime.value[0].split("-")[1], splitTime.value);
    var arr1 = genTimeSession(openTime.value[1].split("-")[0], openTime.value[1].split("-")[1], splitTime.value);
    sessions1.value = arr.slice(2, 7)
    sessions2.value = arr1
    console.log(sessions1.value, sessions2.value);
    const obj = {
        date: select.value.time,
        sport_id: id
    }
    Getsession(obj).then(res => {
        if (res.data.code == 0) {
            session.value = res.data.data
            console.log(session.value);
        }
    })
}
// 写一个方法创建时间分段
function genTimeSession(start = "08:00", end = "21:00", splitTime = 60) {
    // 返回的数据
    var arr = [];
    // 开始时间
    var startTime = dayjs("2023-06-20 " + start);
    // 结束时间
    var endTime = dayjs("2023-06-20 " + end);
    // 遍历100次
    for (var i = 0; i < 100; i++) {
        // 对象{starts:"08:00",ends:"09:00"}
        var obj = { starts: startTime.format("HH:mm") };
        // 结束时间等于在原有基础上加60分钟    
        startTime = startTime.add(splitTime, 'minute');
        obj.ends = startTime.format("HH:mm");
        if (startTime.isSameOrBefore(endTime)) {
            arr.push(obj);
        } else {
            break;
        }
    }
    return arr;
}

</script>
<style>
.guaQi_title .svg {
    color: rgb(245, 202, 23);

}
</style>
<style lang="scss" scoped>
::-webkit-scrollbar {
    width: 6px;
}

.box {
    margin: 0;
    padding: 0;
    background-color: rgb(245, 245, 245);

    .header {
        width: 96%;
        height: 45px;
        background-color: rgb(245, 245, 245);
        padding-left: 50px;

        a {
            font-size: 13px;
        }

        span {
            line-height: 45px;
        }
    }

    .select {
        display: flex;
        width: 96%;
        margin: 0 auto;
        background-color: white;
        height: 60px;
        align-items: center;
        padding-left: 25px;
        justify-content: space-between;

        .select_left {
            display: flex;
            align-items: center;
            height: 100%;

            .select_left_info {
                height: 35px;
            }

            .searchForm {
                height: 32px;
            }
        }

        .block {
            .demonstration {
                margin-right: 10px;
            }
        }

        .select_right {
            width: 110px;

            button {
                border: none;
                background-color: rgb(142, 206, 254);
                color: white;
                margin-right: 15px;
                border-radius: 6px;
                font-size: 12px;
                padding: 2px 8px;
            }
        }
    }

    .content {
        width: 98%;
        margin: 8px auto;
        background-color: rgb(255, 255, 255);
        height: 450px;
        margin-bottom: 30px;

        .top {
            width: 96%;
            height: 50px;
            display: flex;
            border-bottom: 1px solid rgb(213, 212, 212);
            justify-content: space-between;
            padding: 0 25px;
            align-items: center;

            .top_left {
                display: flex;
                align-items: center;

                span {
                    font-size: 14px;
                }

                .tag {
                    width: 30px;
                    height: 30px;
                    background-color: rgb(255, 217, 120);
                    border-radius: 50%;
                    transform: scale(0.7);
                    font-size: 10px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    margin: 0;
                    color: white;
                }
            }

            .top_right {
                button {
                    border: none;
                    background-color: rgb(142, 206, 254);
                    color: white;
                    margin-right: 15px;
                    border-radius: 6px;
                    font-size: 12px;
                    padding: 2px 8px;
                }
            }
        }

        .content_title {
            width: 96%;
            display: flex;
            height: 60px;
            align-items: center;
            justify-content: space-between;
            padding: 0 25px;

            .title_left {
                display: flex;
                width: 500px;
                height: 55px;
                align-items: center;
                justify-content: flex-start;


                span {
                    display: block;
                    height: 35px;
                    line-height: 35px;
                    width: 80px;
                    text-align: center;
                    border-radius: 3px;
                    color: rgb(0, 0, 0);
                    font-size: 14px;
                    user-select: none;
                    cursor: pointer;
                    margin-left: 15px;
                }

                .active {
                    background-color: rgb(255, 218, 119);
                    color: white;
                }
            }

            .title_right {
                display: flex;
                align-items: center;
                height: 60px;

                .title_right_kuang {
                    width: 40px;
                    display: flex;
                    flex-direction: column;
                    align-items: center;

                    span {
                        font-size: 12px;
                        transform: scale(0.8);
                    }

                    &:nth-of-type(2) {
                        .kuang {
                            font-size: 12px;
                            line-height: 10px;
                            color: red;
                        }
                    }

                    &:nth-of-type(3) {
                        .kuang {
                            background-color: rgb(221, 221, 221);
                        }

                    }

                    &:nth-of-type(4) {
                        .kuang {
                            background-color: rgb(165, 208, 241);
                        }

                    }

                    &:nth-of-type(5) {
                        .kuang {
                            background-color: rgb(255, 128, 115);
                        }

                    }

                    .kuang {
                        width: 10px;
                        height: 10px;
                        border: 1px solid rgb(222, 222, 222);

                    }
                }
            }
        }

        .content_table {
            width: 100%;
            height: 300px;
            background-color: rgb(245, 245, 245);
            margin: 0 auto;
            display: flex;
            justify-content: center;
            align-items: center;
            border-left: 1px solid rgb(210, 210, 210);
            border-right: 1px solid rgb(210, 210, 210);

            .content_table_info {
                width: 96%;
                height: 90%;
                background-color: rgb(255, 255, 255);
                overflow: auto;
            }

            .resource-titles {
                float: left;
                width: 100%;
                color: #666;
                background: #ffffff;
                padding-left: 3px;
                height: 100%;

                .resource-titles_info {
                    display: flex;

                    .resource-items_pk {
                        height: 40px;
                        line-height: 40px;
                        text-align: right;
                        margin-left: 20px;

                        .resource-time {
                            display: inline-block;
                            width: 80px;
                            cursor: pointer;
                            user-select: none;
                        }
                    }
                }

                .resource-title_pk {
                    height: 40px;
                    line-height: 40px;
                    text-align: center;
                    width: 84px;
                }

                .resource-title_box {
                    height: 80%;
                    overflow-y: auto;
                    display: flex;

                    .resource-items {
                        height: 40px;
                        margin: 5px 0;

                        .resource-item {
                            width: 80px;
                            margin-right: 2px;
                            display: inline-block;
                            cursor: pointer;

                            .item-state,
                            .active {
                                position: relative;
                                width: 100%;
                                height: 40px;
                                line-height: 40px;
                                text-align: center;
                                margin-bottom: 5px;
                                border: 1px solid #ccc;
                                border-radius: 4px;
                                background: #ffffff;
                                color: transparent;
                                user-select: none;

                                font-size: 30px;
                            }

                            .active {
                                color: red;
                            }
                        }
                    }
                }

                .resource-title {
                    height: 40px;
                    width: 70px;
                    line-height: 40px;
                    text-align: center;
                    margin: 5px 0;
                }
            }

            .resource-content {
                width: 80%;
                margin-left: 70px;
                padding: 0 10px;
                overflow-x: auto;
                white-space: nowrap;
                color: #666;
                background: #ffffff;

                .resource-items_pk {
                    height: 40px;
                    line-height: 40px;
                    text-align: left;
                    margin-left: 20px;

                    .resource-time {
                        display: inline-block;
                        width: 78px;
                        cursor: pointer;
                        user-select: none;
                    }
                }


            }

        }
    }

    .guaQi {
        // background-color: red;
        width: 100%;
        margin: 0 auto;

        .guaQi_title {
            background-color: white;
            height: 60px;
            line-height: 60px;
            display: flex;
            align-items: center;
            padding-left: 20px;
            font-size: 14px;
            border-bottom: 1px dotted rgb(222, 222, 222);

            span {
                margin-left: 15px;
            }
        }

        .guaQi_content {
            width: 100%;
            height: 200px;
            background-color: white;
            overflow: hidden;
            display: flex;
            // margin-left: 20px;
            padding-left: 15px;
            box-sizing: border-box;
            .guaQi_list_left {
                display: flex;
                flex-wrap: wrap;
                flex-direction: column;
                width: 300px;
                height: 100%;
                border-right: 1px solid #d6d5d5;
                border-top: 1px solid #d6d5d5;
                padding-top: 10px;

                span {
                    margin-right: 10px;
                }

                .phone {
                    width: 95%;
                    height: 40px;
                    text-align: right;
                    margin-top: 10px;

                    input {
                        height: 34px;
                        width: 217px;
                        border: none;
                        outline: none;
                        border: 1px solid #cac9c9;
                        padding: 6px;
                        box-sizing: border-box;
                        border-radius: 6px;
                    }
                }
            }

            .guaQi_list_right {
                width: 70%;
                border-top: 1px solid #d6d5d5;
                box-sizing: border-box;
                padding-left: 40px;
                p {
                    line-height: 40px;
                }
                .guaQi_list_right_info {
                    // width: 80%;
                    width: 200px;
                    height: 100px;
                    display: flex;
                    flex-direction: column;
                    flex-wrap: wrap;
                    align-items: flex-start;
                    justify-content: flex-start;
                    margin-top: 30px;

                    .yuding {
                        width: 150px;
                        padding: 5px 10px;
                        border: 1px solid #acaaaa;
                        font-size: 14px;
                        margin-bottom: 15px;
                        margin-left: 15px;
                        span{
                            &:nth-of-type(2){
                                margin-left: 15px;
                            }
                        }
                    }
                }
            }
        }
    }
}</style>